<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="javabean.JDBCBean"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<!-- layui -->
	<link rel="stylesheet" href="../public/layui/css/layui.css">
	<script src="../public/layui/layui.js"></script>
	<style>
		.layui-table, .layui-table-view{
			margin-top: 0px;
		}
	</style>
</head>
<body>
<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
	{{#  if(d.state == 0){ }}
	<span style="color:#5FB878;">可接单</span>
	{{#  } else if(d.state == 1)  { }}
	已接单
	{{#  } else{ }}
	已送达
	{{# } }}
</script>
<!-- 搜索框 -->
<script  type="text/html" id="search">
	<div class="demoTable">
		条件搜索：
		<div class="layui-inline">
			<select id="condition" name="condition" lay-verify="required">
				<option value=""></option>
				<option value="Oid">订单ID</option>
				<option value="Uid">用户ID</option>
				<option value="nowarea">当前地址</option>
				<option value="destination">目的地</option>
				<option value="state">状态</option>
			</select>
		</div>
		<div class="layui-inline">
			<input class="layui-input" name="conditionValue" id="conditionValue" autocomplete="off" placeholder="请输入搜索内容">
		</div>
		<button class="layui-btn" data-type="reload" lay-event="search">搜索</button>
	</div>
</script>

<!-- 表单 -->
<table id="demo" lay-filter="form">

</table>

<!-- 行操作  -->
<script type="text/html" id="operateBar">
	<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="orderAccept">接单</a>
</script>

<!-- 状态模板 -->



<script>

	layui.use(['table', 'jquery'],function(){
		$ = layui.jquery;
		var table = layui.table;
		var tableIns =  table.render({
			elem: '#demo'
			,height: 530
			,url: './orderlist'
			,title: '数据表单'
			,toolbar: '#search'
			,page: true
			,cols: [[
				{type: 'numbers', width:50, fixed:'left'}
				,{field: 'Oid', title: '订单ID', width:150, sort: true, fixed: 'left'}
				,{field: 'Uid', title: '用户ID', width:170, sort: true}
				,{field: 'nowarea', title: '当前地址', width: 140, sort: true}
				,{field: 'destination', title: '目的地', width: 110, sort: true}
				,{field: 'state', title: '状态', width: 150, sort:true, templet:'#statusTpl'}
				,{fixed: 'right', title:'操作', width: 200, align:'center', toolbar: '#operateBar'} //这里的toolbar值是模板元素的选择器
			]]
		});

		// 直接编辑
		table.on('edit(form)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
			console.log(obj.value); //得到修改后的值
			console.log(obj.field); //当前编辑的字段名
			console.log(obj.data); //所在行的所有相关数据
		});


		// 监听侧边工具条  编辑，删除
		table.on('tool(form)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			var id = data.Oid;
			if(layEvent === 'orderAccept'){ //删除
				layer.confirm('请确认接单', function(index){
					layer.close(index);
					//向服务端发送删除指令
					$.ajax({
						url: './orderaccept',
						method: 'get',
						dataType: 'JSON',
						data: "id=" +id,
						success: function(data){
							if(data.code == 0){
								layer.msg(data.msg);
								$('.layui-laypage-btn').click();
							}else{
								layer.msg(data.msg);
							}

						}
					})
				});
			}
		});



		// 顶部工具栏事件
		table.on('toolbar(form)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			var data = obj.data;
			switch(obj.event){
					// 条件查找
				case 'search':
					var conditionValue = $('#conditionValue');
					var condition = $('#condition');
					//这里以搜索为例
					tableIns.reload({
						where: { //设定异步数据接口的额外参数，任意设
							"condition": condition.val(),
							"conditionValue": conditionValue.val()
						}
						,page: {
							curr: 1 //重新从第 1 页开始
						}
					});
					break;
					// 添加书籍
				case 'add':
					var addBookLayer = layer.open({
						type: 2,
						title: "添加书籍",
						area: ['800px', '600px'],
						maxmin: true, //开启最大化最小化按钮
						shadeClose: true,
						content: "bookadd.jsp",
						end: function () {
							console.log("finish add");
							$(".layui-laypage-btn").click();
						}
					});
					layer.full(addBookLayer);
					break;

			};
		});

	});



</script>
</body>
</html>